{% extends 'common/panel.html' %}

{% block panel %}
{% load humanize %}
{% load analysis_extras %}

<h3>Natural Hazards</h3>
<div class='freetext'>
<p>
<table  style='width:430px' class='analysis_report_container'>
    <tbody>
        <tr class="grey">
            <td><b>Natural Disaster Vulnerabilities</b>
                <sup><a id="displayText" href="javascript:toggleDiv('hazards');">Learn More</a><sup>
                <div id="hazards" style="display: none">
                    <p>This report represents which of six major natural hazards (earthquakes, volancoes, landslides, floods, 
                       drought, and cyclones) are considered high risk for the bioregion.
                    <p>Risk has been estimated by combining hazard exposure with historical vulnerability for two indicators of 
                       elements at risk -- population and Gross Domestic Product per unit area.
                    <p>More information on the Natural Hazards datasets can be found <a href="http://www.ldeo.columbia.edu/chrr/research/hotspots/" target="_blank">here</a>.
                </div>
            </td>
        </tr>
        {% if not likely_hazards.0 %}
        <tr>
            <td colspan='2'>None found</td>
        </tr>
        {% else %}
        {% for hazard in likely_hazards %}
        <tr>
            <td>High Risk of {{hazard.0}} <p>(with {{hazard.1}} economic impact)</td>
        </tr>
        {% endfor %}
        {% endif %}
    </tbody>
</table>
</div>

<p>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
   $("#"+divId).toggle();
}
</script>

<style type="text/css">
h3 { font-weight: bold; }
</style>

{% endblock panel %}
